<template>
  <div class="box-db">
    <div class="long-list">
      <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c583f2edc613f1be20fa415910b13ce3.jpg?thumb=1&w=234&h=614&f=webp&q=90"
          alt="">
    </div>
    <div class="brick-list">
      <div class="brick-list-item" :key="index" v-for="(item,index) of brickList">
        <div class="cover">
          <img
              :src="item.coverUrl"
              alt="">
        </div>
        <span class="title">{{item.title}}</span>
        <span class="desc">{{item.desc}}</span>
        <span class="price">{{item.price}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HomeBrickBoxBody",
  data(){
    return{
      brickList:[
        {
          coverUrl:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5dc32ec73299ff79556dcd1cf0f0ac11.png?thumb=1&w=200&h=200&f=webp&q=90',
          title:'小米MIX FOLD',
          desc:'折叠大屏｜自研芯片',
          price:9999
        },
        {
          coverUrl:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eb69512d9d6430d865d457ec52eebb51.png?thumb=1&w=200&h=200&f=webp&q=90',
          title:'小米11 Ultra',
          desc:'1.12\'\'GN2｜2K四微曲屏',
          price:5999
        },
        {
          coverUrl:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/34caee2c867bfd8c5e0dc2d8c663e121.jpg?thumb=1&w=200&h=200&f=webp&q=90',
          title:'小米11 Pro',
          desc:'1.12\'\'GN2｜骁龙888',
          price:4999
        },
        {
          coverUrl:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cb554f30eaa0316b0a736c3d59f21584.png?thumb=1&w=200&h=200&f=webp&q=90',
          title:'小米11 青春版',
          desc:'小米11 青春版 轻薄',
          price:2299
        },
        {
          coverUrl:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3b7fbb6fe07907c60f08358adab5adfe.png?thumb=1&w=200&h=200&f=webp&q=90',
          title:' K40 游戏增强版',
          desc:'轻薄电竞设计',
          price:1999
        },
        {
          coverUrl:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d47f7ecaa04d92bf2790d4a5d53d9099.png?thumb=1&w=200&h=200&f=webp&q=90',
          title:'黑鲨4 Pro',
          desc:'黑鲨4 Pro ',
          price:3999
        },
        {
          coverUrl:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c21247abf4bc610cd86fe00601b0f766.png?thumb=1&w=200&h=200&f=webp&q=90',
          title:'黑鲨4',
          desc:'黑鲨4 磁动力升降肩键',
          price:2499
        },
        {
          coverUrl:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b3553083a4975325eab6470d94465548.jpg?thumb=1&w=200&h=200&f=webp&q=90',
          title:'小米10S',
          desc:'骁龙870 | 对称式双扬立体声',
          price:3299
        }
      ]
    }
  }
}
</script>

<style scoped lang="scss">
.box-db {
  height: 614px;
  width: 100%;
  display: flex;
  justify-content: space-between;

  .long-list {
    width: 234px;
    height: 100%;
    transition: all 0.5s;
    flex-shrink: 0;

    &:hover {
      box-shadow: 0 5px 30px 0 #bdbdbd;
      transform: translateY(-5px);
      transition: all 0.5s;
    }

    img {
      width: 100%;
      height: 100%;
    }
  }

  .brick-list {
    width: 100%;
    height: 100%;
  display: flex;
    flex-wrap: wrap;
    .brick-list-item {
      width: 234px;
      height: 300px;
      transition: all 0.5s;
      background-color: #FFFFFF;
      margin: 0 0 14px 14px;
      display: flex;
      flex-direction: column;
      padding: 20px;
      align-items: center;

      &:hover {
        box-shadow: 0 5px 30px 0 #bdbdbd;
        transform: translateY(-5px);
        transition: all 0.5s;
      }

      .cover {
        width: 160px;
        height: 160px;
        margin-bottom: 18px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      span {
        width: 100%;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        &.title {
          font-size: 14px;
          color: #333333;
          margin-bottom: 2px;
        }

        &.desc {
          margin-bottom: 10px;
          font-size: 12px;
          color: #b0b0b0;
        }
        &.price{
          font-size: 14px;
          color: #FF6700;
        }
      }
    }
  }
}
</style>